<template>
	<view class="ContentDynamic">
		<!-- <u-button @click="clear">清空列表</u-button> -->
		<u-waterfall   v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @tap="GoGoods(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<view v-if="item.dynamic.videoCover != '' " class="imagess"> 
						<u-lazy-load threshold="-450" border-radius="10" :image="item.dynamic.videoCover+'?x-oss-process=image/resize,m_lfit,h_600,w_600'" :index="index"></u-lazy-load>
						<image class="plays" src="../../static/image/icon_broadcast@2x.png" mode=""></image>
					</view>
					<view v-if="item.dynamic.images != '' " class="imagess">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.dynamic.images[0]+'?x-oss-process=image/resize,m_lfit,h_600,w_600'" :index="index"></u-lazy-load>
					</view>
					<view class="demo-title  p16">
						{{item.dynamic.title}}
					</view>
					<view class="demo-shop p16">
						<view class="fl one">
							<image class="vm userImg" :src="item.dynamic.member.eperAccount.eperAvatarImg" mode=""></image>
							{{item.dynamic.member.eperAccount.eperUsername}}
						</view>
						<view class="fr">
							<image class="see" src="../../static/image/icon_see@2x.png" mode=""></image>
							{{item.dynamic.hits}}
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @tap="GoGoods(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<view v-if="item.dynamic.videoCover != '' " class="imagess">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.dynamic.videoCover+'?x-oss-process=image/resize,m_lfit,h_600,w_600'" :index="index"></u-lazy-load>
						<image class="plays" src="../../static/image/icon_broadcast@2x.png" mode=""></image>
					</view>
					<view v-if="item.dynamic.images != '' " class="imagess">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.dynamic.images[0]+'?x-oss-process=image/resize,m_lfit,h_600,w_600'" :index="index"></u-lazy-load>
					</view>
					<view class="demo-title  p16">
						{{item.dynamic.title}}
					</view>
					<view class="demo-shop p16">
						<view class="fl one">
							<image class="vm userImg" :src="item.dynamic.member.eperAccount.eperAvatarImg" mode=""></image> 
							{{item.dynamic.member.eperAccount.eperUsername}}
						</view>
						<view class="fr">
							<image class="see" src="../../static/image/icon_see@2x.png" mode=""></image>
							{{item.dynamic.hits}}
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view v-if="flowList == '' " class=" dataNone">
			<image src="../../static/image/dongtai@2x.png" mode=""></image>
			<p>暂无动态</p>
		</view>
		<!-- <u-loadmore bg-color="rgb(240, 240, 240)" <:statu></:statu>s="loadStatus" ></u-loadmore> -->
	</view>
</template>

<script>
	export default {
		props: ['url', 'keyword', 'urlType', 'id'],
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				pageNumber: 1,
				pageSize: 16,
				stops: 0,
				noShake: 0,
			}
		},
		created() {
			if (this.keyword == false) {
				this.keyword = ''
			}
		},
		onReachBottom() {},
		methods: {
			checking() {
				if (this.stops == 0 && this.noShake == 0) {
					this.noShake = 1
					this.init()
				}
			},
			inits() {
				this.clear()
				this.pageNumber = 1
				this.stops = 0
				this.init()
			},
			init() {
				let token = uni.getStorageSync('token')
				let paramer = {
					pageable: {
						pageNumber: this.pageNumber,
						pageSize: this.pageSize
					},
					keyword: this.keyword
				}
				if (this.urlType == 'isFollowFalse') {
					paramer.isFollow = false
				}
				if (this.urlType == 'isFollowTrue') {
					paramer.isFollow = true
				}
				if (this.id != 0) {
					paramer.id = this.id
				}
				uni.request({
					header: {
						token: token
					},
					method: 'POST',
					url: this.url,
					data: paramer,
					success: (res) => {
						let data = res.data.data
						if (data.length != this.pageSize) {
							this.stops = 1
						}
						this.pageNumber = this.pageNumber + 1
						uni.setStorageSync('dynamicData', data)
						this.addRandomData()
						this.noShake = 0
					}
				})
				uni.stopPullDownRefresh()
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			GoGoods(item) {
				this.$navigateTo('../DynamicDetails/DynamicDetails?id=' + item.dynamic.id)
			},
			addRandomData() {
				let dynamicData = uni.getStorageSync('dynamicData')
				for (let i = 0; i < dynamicData.length; i++) {
					// let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(dynamicData[i]))
					// item.dynamic.id = this.$u.guid();
					this.flowList.push(item);
				}
				uni.removeStorageSync('dynamicData')
			},
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	@import './index.scss';
</style>
